<template>
  <div style="height: 100%;">
    <v-container>
      <v-layout
        align-center
        justify-center
        clomn
        fill-height
        style="margin-top: 15%;"
      >
        <!-- min-height:400px;
                    slot-scope="{ hover }"
            :class="`elevation-${hover ? 3 : 0} contentCard`"
        -->
        <v-flex xs12 sm4 md3 px-1 py-1>
          <v-hover>
            <v-card
              slot-scope="{ hover }"
              :class="`elevation-${hover ? 16 : 2} contentCard`"
              style="border: 1px solid #dddddd;"
            >
              <v-card-text>
                <v-tabs color="#F8FAFD" show-arrows v-model="tab">
                  <v-tabs-slider color="#71af65"></v-tabs-slider>

                  <v-tab
                    v-for="(item, index) in title"
                    :key="index"
                    class="mx-3"
                    style="width: 50%;"
                  >
                    <!-- @click="testTab(index)" -->
                    <span
                      :class="{
                        color_71af65: tab === index,
                        color_666: tab !== index,
                      }"
                    >
                      {{ item }}</span
                    >
                  </v-tab>

                  <v-tabs-items v-model="tab" class="tab_content">
                    <v-tab-item
                      style="border-top: 1px solid #E2E2E2;"
                      :value="tabValue"
                    >
                      <Login></Login>
                    </v-tab-item>
                    <v-tab-item
                      style="border-top: 1px solid #E2E2E2;"
                      :value="tabValue"
                    >
                      <Enroll></Enroll>
                    </v-tab-item>
                  </v-tabs-items>
                </v-tabs>
              </v-card-text>
            </v-card>
          </v-hover>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>
import Login from './Login.vue';
import Enroll from './Enroll.vue';
export default {
  components: {
    Login,
    Enroll,
  },
  data: () => ({
    title: ['登录', '注册'],
    tab: 0,
    tabValue: '',
  }),

  created() {},

  methods: {},
};
</script>

<style>
.color_71af65 {
  color: #71af65;
}

.color_666 {
  color: #666666;
}

.login_border_box {
  border: 1px solid #666666;
  border-radius: 7px;
}

.login_box {
  border: 1px solid #71af65;
}

.tab_content {
  min-height: 320px;
}
</style>
